import React from 'react';
import { Drawer, Form, Input, Select, message } from 'antd';
import { DeviceFormValues } from '../../types/device';

interface AddDeviceDrawerProps {
  visible: boolean;
  onClose: () => void;
  onSubmit: (values: DeviceFormValues) => void;
  addForm: any;
}

// 模拟项目数据
const projectOptions = [
  { label: '智慧工厂', value: 'factory' },
  { label: '智能建筑', value: 'building' },
  { label: '智慧城市', value: 'city' },
];

// 模拟分组数据
const groupOptions = [
  { label: '传感器组', value: 'sensor' },
  { label: '控制器组', value: 'controller' },
  { label: '网关组', value: 'gateway' },
];

// 模拟产品模板数据
const templateOptions = [
  { label: '温湿度传感器', value: 'temp-humidity' },
  { label: '光照传感器', value: 'light' },
  { label: '压力传感器', value: 'pressure' },
];

// 模拟设备协议数据
const protocolOptions = [
  { label: 'MQTT', value: 'mqtt' },
  { label: 'HTTP', value: 'http' },
  { label: 'CoAP', value: 'coap' },
];

const AddDeviceDrawer: React.FC<AddDeviceDrawerProps> = ({
  visible,
  onClose,
  onSubmit,
  addForm
}) => {
  const handleSubmit = async () => {
    try {
      const values = await addForm.validateFields();
      onSubmit(values);
    } catch (error) {
      message.error('表单验证失败，请检查必填项');
    }
  };

  const handleClose = () => {
    addForm.resetFields();
    onClose();
  };

  return (
    <Drawer
      title="添加设备"
      placement="right"
      onClose={handleClose}
      open={visible}
      width={600}
      footer={[
        <button key="submit" type="submit" form="add-device-form" style={{ display: 'none' }}>
          提交
        </button>
      ]}
    >
      <Form
        form={addForm}
        layout="horizontal"
        labelAlign="right"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        id="add-device-form"
        onFinish={handleSubmit}
      >
        <Form.Item
          name="project"
          label="项目"
          rules={[{ required: true, message: '请选择项目' }]}
        >
          <Select placeholder="请选择项目">
            {projectOptions.map(option => (
              <Select.Option key={option.value} value={option.label}>
                {option.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="deviceName"
          label="设备名称"
          rules={[{ required: true, message: '请输入设备名称' }]}
        >
          <Input placeholder="请输入设备名称" />
        </Form.Item>

        <Form.Item name="deviceSN" label="设备号">
          <Input placeholder="请输入设备号" />
        </Form.Item>

        <Form.Item name="group" label="所属分组">
          <Select placeholder="请选择所属分组">
            {groupOptions.map(option => (
              <Select.Option key={option.value} value={option.label}>
                {option.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item name="productTemplate" label="产品模版">
          <Select placeholder="请选择产品模版">
            {templateOptions.map(option => (
              <Select.Option key={option.value} value={option.label}>
                {option.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="protocol"
          label="设备协议"
          rules={[{ required: true, message: '请选择设备协议' }]}
        >
          <Select placeholder="请选择设备协议">
            {protocolOptions.map(option => (
              <Select.Option key={option.value} value={option.label}>
                {option.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        {/* 其他字段可以根据需要添加 */}
      </Form>
    </Drawer>
  );
};

export default AddDeviceDrawer;